<template>
	<div id="main">
		<div id="nav-box">
			<div class="menu">
				<Nav :isCollapse="isCollapse"></Nav>
			</div>
		</div>
		<div id="content-box">
			<el-row class="header-top">
				<el-col :span="1" class="header-top-left">
					<div class="isCollapse-btn" @click="isCollapse = !isCollapse">
						<font class="el-icon-s-unfold" size="5px" v-show="isCollapse"></font>
						<font class="el-icon-s-fold" size="5px" v-show="!isCollapse"></font>
					</div>
				</el-col>
				<el-col :span="23" class="header-top-right">
					<span style="margin-left: 20px">{{ $route.meta.title }}</span>
				</el-col>
			</el-row>
			<el-row>
				<div class="content-main">
					<!--<router-view v-wechat-title="$route.meta.title"></router-view>-->
					<router-view></router-view>
				</div>
			</el-row>
		</div>
	</div>
</template>

<script>
import Nav from "@/components/Nav";

export default {
	name: "Home",
	components: {
		Nav
	},
	data() {
		return {
			isCollapse: false
		};
	},
}
</script>

<style scoped>
#main {
	height: 100%;
	display: flex;
}

#main > #nav-box,
#main > #content-box {
	height: 100%;
}

#main > #nav-box,
.header-top {
	background-color: #545c64;
}

.menu {
	width: 100%;
	overflow: hidden;
}

#main > #content-box {
	width: 100%;
	overflow: auto;
}

.header-top,
.header-top-left,
.header-top-right {
	height: 45px;
	line-height: 45px;
	color: white;
}

/*存在兼容性问题（后期解决）*/
.header-top {
	position: sticky;
	position: -webkit-sticky;
	top: 0px;
	z-index: 2;
}

.isCollapse-btn {
	height: 100%;
	text-align: center;
	color: white;
	transition: all 0.25s;
	border-right: 1px solid #909399;
	border-left: 1px solid #909399;
}

.isCollapse-btn:hover {
	cursor: pointer;
	color: #ffd04b;
}

.isCollapse-btn > font {
	width: 100%;
	line-height: 45px;
}
</style>